<template>
  <transition name="el-zoom-in-center" appear>
    <el-card shadow="hover" class="total-card">
      <div class="header">
        <el-avatar v-if="icon" class="icon" :size="14" shape="square" :src="icon" />
        <span class="title">{{title}}</span>
        <span v-if="$slots.info" class="info">
          <slot name="info"></slot>
        </span>
      </div>
      <div class="number">
        <animated-number :value="number" :delay="100" />
      </div>
    </el-card>
  </transition>
</template>

<script>
import AnimatedNumber from '@/components/AnimatedNumber';

export default {
  components: {
    AnimatedNumber
  },
  props: {
    icon: String,
    title: String,
    number: null,
  },
}
</script>

<style scoped>
.total-card {
  cursor: pointer;
  outline: none;
}
.header {
  position: relative;
  text-align: left;
  font-size: 14px;
}

.header > .title {
  color: #909399;
}

.header > .icon {
  position: relative;
  top: 2px;
  background: transparent;
}
.header > .info {
  position: absolute;
  top: 0px;
  right: 0px;
  color:#F56C6C;
}
.header > .info >>> .icon {
  vertical-align: middle !important;
}

.number {
  margin-top: 12px;
  text-align: left;
  color: #303133;
  font-size: 22px;
}
</style>